<template>
    <div class="answerList" v-loading="loading">
        <div>
            <h3>筛选条件</h3>
            <div class="box">
                <div>
                    <el-input v-model="query.answerId" placeholder="通过答题ID筛选"></el-input>
                </div>
                <div>
                    <el-input v-model="query.uid" placeholder="通过用户ID筛选"></el-input>
                </div>
                <div>
                    <el-input v-model="query.paperTitle" placeholder="通过试卷标题筛选" v-if="!paperId"></el-input>
                </div>
                <div>
                    <el-select v-model="query.status" placeholder="通过提交类型筛选">
                        <el-option label="正在做" :value="-1"></el-option>
                        <el-option label="已提交" :value="1"></el-option>
                        <el-option label="已超时" :value="2"></el-option>
                    </el-select>
                </div>
                <div>
                    <el-button icon="el-icon-search" type="primary" @click="getData">查询</el-button>
                </div>
                <div>
                    <el-button icon="el-icon-refresh" type="primary" @click="query = {};getData()">重置</el-button>
                </div>
            </div>
        </div>
        <div v-if="data.page">
            <el-table
            stripe
            :data="data.list"
            style="width: 100%">
                <el-table-column
                    prop="answer.id"
                    label="ID">
                </el-table-column>
                <el-table-column
                    label="用户">
                    <template slot-scope="scope">
                        <userInfo :data="scope.row"/>
                    </template>
                </el-table-column>
                <el-table-column
                    label="试卷" v-if="!paperId">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top"
                        width="170"
                        trigger="hover" v-if="scope.row.paper">
                            <div style="padding: 5px;">
                                <p>标题：{{ scope.row.paper.title }}</p>
                                <div>类型：
                                    <el-tag
                                    type="success"
                                    disable-transitions>{{ types[scope.row.paper.type] }}</el-tag>
                                </div>
                                <div>数量：{{ scope.row.paper.list ? scope.row.paper.list.split(',').length : 0}}</div>
                                <div>时间：{{ scope.row.paper.time / 60000 }}分钟</div>
                            </div>
                            <el-tag slot="reference">{{ scope.row.paper.title }}</el-tag>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="answer.fraction"
                    label="分数">
                </el-table-column>
                <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                        <el-tag
                        :type="answerStatus[scope.row.answer.status].type"
                        disable-transitions>{{ answerStatus[scope.row.answer.status].title }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="创建时间">
                    <template slot-scope="scope">
                        <div>{{ dayjs(scope.row.answer.createTime).format('YYYY-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="提交时间">
                    <template slot-scope="scope">
                        <div v-if="scope.row.answer.submitTime">{{ dayjs(scope.row.answer.submitTime).format('YYYY-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    :width="$ispc ? '300px' : ''"
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button
                            @click="$router.push('/admin/adminAnswerDetail?id=' + scope.row.answer.id)">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer-pagination" v-if="data.page">
            <el-pagination
            @size-change="i => this.getData(limit = i)"
            @current-change="i => this.getData(page = i)"
            :current-page="page"
            :page-sizes="limits"
            :page-size="limit"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { getAnswerList } from '@/api/answer'
    import { mapState } from 'vuex'
    import userInfo from '@/components/user/userInfo.vue'
    export default {
        props : ['paperId', 'desc'],
        components : {
            userInfo
        },
        data() {
            return {
                data : {},
                query : {},
                page : 1,
                limit : 10,
                loading : false,
            }
        },
        computed : {
            ...mapState(['limits', 'types', 'answerStatus']),
        },
        created(){
            this.limit = this.limits[0]
            this.getData()
        },
        methods : {
            getData(){
                this.loading = true
                this.query.limit = this.limit
                this.query.page = this.page
                this.query.isUser = 1
                this.query.desc = this.desc
                this.query.paperId = this.paperId
                getAnswerList(this.query).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.data = res.data
                        console.log(this.data.list);
                    }
                })
            },
            handleDetele(){

            },
        }
    }
</script>

<style lang="scss" scoped>
.answerList{
    &>div{
        padding: 10px;
        background-color: #fff;
        margin: 10px 0;
        border-radius: 10px;
        .box{
            margin: 10px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            &>div{
                margin: 5px;
                max-width: 40%;
            }
        }
    }
    .footer-pagination{
        display: flex;
        justify-content: end;
    }
}
</style>